<template>
  <div>
    <Header :queryKey="queryKey"></Header>
    <div class="search-main">
      <ul class="main-if">
        <li
          v-for="(item, index) in searchList.data"
          :key="index"
          @click="changeTab(index)"
        >
          <div :class="searchList.currentIndex == index ? 'active' : ''">
            {{ item.name }}
          </div>
          <div v-if="index != 0">
            <i
              class="iconfont icon-shangjiantou"
              :class="item.status == 1 ? 'active' : ''"
            ></i>

            <i
              class="iconfont icon-xiajiantou"
              :class="item.status == 2 ? 'active' : ''"
            >
            </i>
          </div>
        </li>
      </ul>
      <!--搜索出来的商品-->
      <div v-if="goodsList.length" class="content">
        <ul>
          <li v-for="(item, index) in goodsList" :key="index">
            <h3>
              <img :src="item.imgUrl" alt="" />
            </h3>
            <div>
              <p>{{ item.name }}</p>
              <p>{{ item.content }}</p>
              <p>价格：{{ item.price }}</p>
              <p>销量：{{ item.num }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div v-else>没有此数据...- -!~</div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/search/Header.vue";
import http from "@/common/api/request.js";
export default {
  data() {
    return {
      goodsList: [],
      queryKey: "",
      searchList: {
        currentIndex: 0,
        data: [
          /*
						0代表都不亮
						1代表上箭头亮
						2代表下箭头亮
					*/
          { name: "综合", key: "zh" },
          { name: "销量", status: 0, key: "num" },
          { name: "价格", status: 0, key: "price" },
        ],
      },
    };
  },
  components: {
    Header,
  },
  computed: {
    orderBy() {
      //得到对应的对象===》知道点的是销量还是价格，还是谁？？？
      let obj = this.searchList.data[this.searchList.currentIndex];
      let val = obj.status == "1" ? "asc" : "desc";
      return {
        [obj.key]: val,
      };
    },
  },
  created() {
    //接收到传入的值
    this.queryKey = this.$route.query.key;
    //拿到数据
    this.getData();
  },
  methods: {
    getData() {
      this.orderBy;
      http
        .$axios({
          url: "/api/goods/shopList",
          params: {
            searchName: this.queryKey,
            ...this.orderBy,
          },
        })
        .then((res) => {
          this.goodsList = res;
        });
    },
    //点击综合==》价格==》销量
    changeTab(index) {
      //添加值添加
      this.searchList.currentIndex = index;
      //知道点击哪一个类型 : 综合==》价格==》销量
      let item = this.searchList.data[index];
      //取消当前所有状态===>都变成0
      this.searchList.data.forEach((v, i) => {
        if (i != index) {
          v.status = 0;
        }
      });
      //切换
      if (index == this.searchList.currentIndex) {
        item.status = item.status === 1 ? 2 : 1;
      }
      //进行数据排序
      this.getData();
    },
  },
  watch: {
    $route() {
      this.queryKey = this.$route.query.key;
      this.getData();
    },
  },
};
</script>

<style scoped lang='scss'>
.active {
  color: red;
}
.main-if {
  display: flex;
  justify-content: space-around;
  li {
    display: flex;
    div {
      display: flex;
      flex-direction: column;
    }
  }
}
.content {
  ul li {
    margin: 10px;
    border: 1px solid #ccc;
    img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
